﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxChart annotations & conditional label colors example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.annotations.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.api.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array            
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Country' },
                    { name: 'GDP' },
                    { name: 'DebtPercent' },
                    { name: 'Debt' }
                ],
                url: '../sampledata/gdp_dept_2010.txt'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

            fnLabelsClass = function (value, itemIndex, serie, group) {
                if (value > 100)
                    return 'redLabel';

                return 'greenLabel';
            },
            
            fnLabelsBorderColor = function (value, itemIndex, serie, group) {
                if (value > 100)
                    return '#FF0000';

                return '#89A54E';
            }

            
            fnFormatLabel = function (value, itemIndex, serie, group) {
                return value;
            }

            // prepare jqxChart settings
            var settings = {
                title: "Country economic comparison",
                description: "Per capita GDP and Debt in 2010",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                {
                    dataField: 'Country',
                    flip: false,
                    gridLines: {visible: false}
                },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 50,
                            toolTipFormatSettings: { sufix: ' USD', thousandsSeparator: ','},
                            valueAxis:
                            {
                                title: {
                                    text: 'GDP & Debt per Capita (USD)<br>'
                                },
                                gridLines: {visible: false}                                
                            },
                            series: 
                            [
                                { dataField: 'GDP', displayText: 'GDP per Capita' },
                                { dataField: 'Debt', displayText: 'Debt per Capita'}
                            ]
                        },
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 10,
                                visible: true,
                                position: 'right',
                                title: {text: 'Debt (% of GDP)'},
                                gridLines: {visible: false},
                                labels: {
                                    horizontalAlignment: 'left',
                                    formatSettings: { sufix: '%' }
                                }
                            },
                            series: 
                            [
                                {
                                    linesUnselectMode: 'click',
                                    dataField: 'DebtPercent',
                                    displayText: 'Debt (% of GDP)',
                                    labels:
                                    {
                                        visible: true,
                                        'class': fnLabelsClass,
                                        backgroundColor: 'white',
                                        padding: {left: 5, right: 5, top: 1, bottom: 1},
                                        borderColor: fnLabelsBorderColor,
                                        backgroundOpacity: 0.7,
                                        borderOpacity: 0.7
                                    }
                                }
                            ],
                            bands: [
                                {
                                    minValue: 90, maxValue: 90, fillColor: 'red', lineWidth: 2, dashStyle: '2,2'
                                }
                            ],

                            annotations: [
                                {
                                    type: 'rect',
                                    yValue: 90,
                                    xValue: 6,
                                    offset: { x: -45, y: -25},
                                    width: 90,
                                    height: 20,                                    
                                    fillColor: '#EFEFEF',
                                    lineColor: 'red',
                                    text: {
                                        value: 'Debt threshold',
                                        offset: {
                                            x: 2,
                                            y: 2
                                        },
                                        'class': 'redLabel',
                                       angle: 0
                                    }
                                }
                            ],

                        }

                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);
        });
    </script>

    <style type="text/css">
       .redLabel {
            fill: #FF0000;
            color: #FF0000;
            font-size: 11px;
            font-family: Verdana;
        }
        
       .greenLabel {
            fill: #89A54E;
            color: #89A54E;
            font-size: 11px;
            font-family: Verdana;
        }
        
    </style>

</head>
<body class='default'>
	<div id='chartContainer' style="width:850px; height:500px;">
	</div>
</body>
</html>
